<template>
  <div id="mHeader">
    <div class="mHeader-l">
      <div></div>
      <h3>CEMS</h3>
      <p></p>
      <h4>{{systemName}}</h4>
    </div>
    <div class="mHeader-c" :style="{justifyContent: isSelect?'center':'flex-start'}">
      <Menu mode="horizontal" theme="light" :active-name="activeName">
        <MenuItem :name="item.name" v-for="(item, index) in data" :key="index" @click.native="onSelectMenu(item)" @mouseover.native="mouseover(item)" @mouseout.native="mouseout(item)">
          <!--<Row v-if="isSelect">-->
          <!--<Col span="6"><img :src="activeName===item.name?item.src:item.src1"></Col>-->
          <!--<Col span="18">{{item.text}}</Col>-->
          <!--</Row>-->
          <!--<Row v-else>-->
          <!--<Col span="12"><img :src="activeName===item.name?item.src:item.src1"></Col>-->
          <!--<Col span="12">{{item.text}}</Col>-->
          <!--</Row>-->
          <Row v-if="isSelect" type="flex" justify="center" align="middle">
            <Col span="6">
              <div style="width: 20px;height: 20px;margin-right: 10px" :style="bgImg(item)"></div>
            </Col>
            <Col span="18">{{item.text}}</Col>
          </Row>
          <Row v-else type="flex" justify="center" align="middle">
            <Col span="12">
              <div style="width: 20px;height: 20px;margin-right: 10px" :style="bgImg(item)"></div>
            </Col>
            <Col span="12">{{item.text}}</Col>
          </Row>
        </MenuItem>
      </Menu>
    </div>
    <div class="mHeader-r" :class="{flex15: !isSelect}" v-if="isBack">
      <div style="width: 166px;margin-left: 100px" v-if="isSelect">
        <Select :value="facility" size="large" style="width:100px" :placeholder="''" @on-change="selectChange">
          <Option v-for="(item, index) in facilitys" :value="item.value" :key="index">{{ item.label }}</Option>
        </Select>
      </div>
      <div class="back-home" v-show="user ==='china'">
        <Icon type="ios-home" title="返回主页" style="cursor: pointer;" @click="backHome"/>
      </div>
      <div class="isFullscreen">
        <Fullscreen v-model="isFullscreen"></Fullscreen>
      </div>
      <Menu mode="horizontal" class="m-dark-menu" theme="dark" :active-name="3"
            style="background: #00152905;" @on-select="onSelect">
        <Submenu :name="3">
          <template slot="title">
            <div class="div-inline">
              <img class="user-img" style="vertical-align: middle" src="../../assets/mainImages/user.png"/>
            </div>
            <div class="div-inline">
              <p>&nbsp; {{user}}</p>
            </div>
          </template>
          <MenuItem v-show="user ==='china'" name="goLight" v-if="!isSelect" class="select">浅色版本</MenuItem>
          <MenuItem v-show="user ==='china'" name="goIdefined" v-if="!isSelect" class="select">自定义</MenuItem>
          <MenuItem name="logout" class="select">退出登录</MenuItem>
        </Submenu>
      </Menu>
    </div>
    <div v-else style="font-size: 16px; flex: 0 0 160px; cursor: pointer; color: #fff" @click="$router.go(-1)">
      <Icon type="md-arrow-back" style="color: rgba(76,144,253,1); font-size: 30px;" /> 返回
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import Fullscreen from '../main/components/fullscreen/index'
  export default {
    name: 'mHeader',
    props: {
      // 系统的名称
      systemName: {
        type: String,
        default: ''
      },
      // 激活 子路由的 名字
      activeName: {
        type: String,
        default: ''
      },
      // 子路由 的 数组
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 是否显示 下拉框
      isSelect: {
        type: Boolean,
        default: true
      },
      // 是否显示右侧 内容 返回按钮
      isBack: {
        type: Boolean,
        default: true
      },
      // 下拉框的 数据
      facilitys: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data () {
      return {
        // 是否是全屏的判断 T or F
        isFullscreen: false
        // 下拉框选择
        // facility: 1,
        // facilitys: [
        //   {
        //     value: 1,
        //     label: '1空压站'
        //   },
        //   {
        //     value: 2,
        //     label: '2空压站'
        //   },
        //   {
        //     value: 3,
        //     label: '3空压站'
        //   },
        //   {
        //     value: 4,
        //     label: '4空压站'
        //   }
        // ]
      }
    },

    created () {

    },
    mounted () {
    },
    computed: {
      ...mapState('user', {
        facility: state => state.facility,
        user: state => state.user
      })
    },
    methods: {
      // 右侧菜单 选择方法
      onSelect (selectItem) {
        if (selectItem === 'logout') {
          this.$store.commit('user/updateState', {user: ''})
          this.$router.push({
            name: 'login'
          })
        }
        if (selectItem === 'goLight') {
          this.$router.push({
            path: '/energy/total/allcb'
          })
        }
        if (selectItem === 'goIdefined') {
          this.$router.push({
            path: '/userDefined'
          })
        }
      },
      // 右侧 下拉框 选择方法
      selectChange (val) {
        this.$emit('selectChange', val)
      },
      // 返回主页
      backHome () {
        this.$router.push({path: '/display'})
      },
      // 中间 子路由的 菜单 选择方法
      onSelectMenu (item) {
        this.$emit('onSelectMenu', item)
      },
      // 图片 样式 过滤
      bgImg (item) {
        if (this.activeName === item.name) {
          return {
            background: 'url(' + item.src + ') center center / 100% no-repeat'
          }
        } else if (item.isMouse) {
          return {
            background: 'url(' + item.src + ') center center / 100% no-repeat'
          }
        } else {
          return {
            background: 'url(' + item.src1 + ') center center / 100% no-repeat'
          }
        }
      },
      // 移入事件
      mouseover (item) {
        item.isMouse = true
      },
      mouseout (item) {
        item.isMouse = false
      }
    },
    destroyed () {

    },
    components: {
      Fullscreen
    }
  }
</script>

<style lang='scss'>
  #mHeader {
    background: $header-light;
    display: flex;
    display:-ms-flexbox;
    height: 80px;
    line-height: 80px;
    margin-bottom: 40px;
    .mHeader-l {
      flex: 0 0 30%;
      display: flex;
      align-items: center;
      div {
        width: 58px;
        height: 49px;
        margin: 0 26px 0 59px;
        background: url('../../assets/image/logo.png') no-repeat;
        background-size: 100% 100%;
      }
      h3 {
        font-size: $font-36;
        color: rgba(125,161,255,1)
      }
      h4 {
        font-size: 20px;
        /*font-size: $font-24;*/
        font-weight: 400;
        color: rgba(125,161,255,1)
      }
      p {
        height: 27px;
        width: 1px;
        background-color: #7092fd;
        color: $color;
        margin: 0 24px 4px 17px;
      }
    }
    .mHeader-c {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      display:-ms-flexbox;
      -ms-flex-align:center;
      -ms-flex-pack:center;
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
        color: #fff !important;
        border-bottom: 4px solid #4C90FD;
        background-color: $header-color !important;
        height: 80px;
        line-height: 80px;
      }
      .ivu-menu-horizontal {
        line-height: 60px;
        height: 80px;
      }
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item,
      .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu {
        color: #7092fd;
        font-size: 15px;
        padding: 0 5px;
        height: 80px;
        line-height: 80px;
        background-color: $header-light;
      }
      img {
        width: 20px;
        line-height: 20px;
        margin-right: 10px;
        vertical-align: text-bottom;
      }
    }
    .flex15 {
      flex: 0 0 15% !important;
    }
    .mHeader-r {
      flex: 0 0 30%;
      display: flex;
      align-items: center;
      display:-ms-flexbox;
      -ms-flex-align:center;
      line-height: 80px;
      justify-content: center;
      -ms-flex-pack:center;
      .ivu-menu-dark {
        background-color: rgba(0, 21, 41, 0.02);
      }
      .ivu-select-large.ivu-select-single .ivu-select-selection {
        background-color: #111E49;
        width: 140px;
        height: 80px;
        line-height: 80px;
        @include border;
        margin-right: 26px;
        color: $font-f;
      }
      .ivu-menu {
        z-index: 2;
      }
      .ivu-select-selected-value {
        margin-top: 24px;
        color: $font-f;
      }
      .ivu-select-dropdown {
        background-color: #101E45;
        border: 1px solid #4c90fd;
        width: 140px !important;
      }
      .ivu-icon.ivu-icon-ios-arrow-down.ivu-select-arrow, .select.ivu-menu-item, .ivu-select-item {
        color: $font-f;
      }
      .ivu-select-item-selected, .ivu-select-item-selected:hover, .ivu-select-item:hover {
        color: $font-f;
        background-color: #4c90fd;
      }
      div.back-home {
        margin-right: 20px;
        font-size: 30px;
        color: $color;
      }
      div.isFullscreen {
        color: $color;
      }
      .div-inline {
        display: inline-block;
      }
      .select {
        color: #dbd9d9;
      }
    }
  }
</style>
